<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="pageStyle" />
	<!-- #endif -->
	<view>
		<!-- 个人信息区域 -->
		<view class="info-main">
			<view class="info-left" @click="editUser()">
				<view class="info-left-img">
					<image :src="userInfo.icon" mode="scaleToFill" />
				</view>
				<view class="info-left-info">
					<view class="info-left-name">{{ userInfo.nickname }}</view>
					<view class="info-left-desc"><text v-if="userInfo.icon">资料完整,</text>修改资料请进入详情…</view>
				</view>
			</view>
			<view class="info-right" @click="editUser()">
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
		<!-- 关注 动态 账户越数-->
		<!-- <view class="nums">
			<view class="num-item" v-for="(numItem, key) in numList" :key="key" @click="handleGo(key)">
				<image :src="`/static/image/${numItem.icon}.png`" class="num-icon" mode="widthFix"></image>
				<view class="num-rg">
					<view class="num-name">{{ numItem.label }}</view>
					<view class="num-val">
						<span :class="{
							flg: key === 'action' && numItem.value > 0
						}">{{ key === 'action' && numItem.value > maxActions ? maxActions + '+' : numItem.value }}</span>
						<view class="num-link">
							<uni-icons color="#fff" type="right" size="10"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		 -->
		<!-- 使用情况区域 -->
		<!-- <searchNum @goLogin="isShowAuth = true" ref="searchNum"></searchNum> -->
		<!-- 活动banner -->
		<view class="banner-box" v-if="activityIsOpen && bannerList.length">
			<view v-for="(item, index) in bannerList" :key="index" @click="handleActivity">
				<view class="banner-item">
					<image :src="item.pic" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 菜单区域 -->
		<view class="menu-box">
			<view v-for="(item, index) in menuList" :key="index" @click="handleClickMenu(item)" class="menu-item">
				<view class="menu-item-name">{{ item.name }}</view>
				<view class="menu-item-icon">
					<uni-icons type="right" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<Activity :type="activityType" v-model="showActivity" :money="activityMoney" />
	</view>
</template>
<script>
import {
	mapGetters
} from "vuex";
import Authorize from "@/components/Authorize.vue";
import { getUsrNumApi, getPersonalDistributionInfoApi } from '@/api/user.js'
// import searchNum from "./conponents/searchNum.vue";
import { getBannerConfig } from '@/api/system.js'
import store from "@/store";
import ActivityMixin from '@/mixins/activity.js'
import Activity from '@/pages/components/activity.vue'
import LockScrollMixin from '@/mixins/lockScroll.js'

export default {
	components: {
		Authorize,
		Activity,
		// searchNum
	},
	mixins: [ActivityMixin, LockScrollMixin],
	data() {
		return {
			isShowAuth: false,
			userInfo: {},
			numList: {
				// balance: {
				// 	label: '账户余额',
				// 	value: '999.89',
				// 	icon: 'account'
				// },
				follow: {
					label: '我的关注',
					value: 0,
					icon: 'follow'
				},
				action: {
					label: '关注动态',
					value: 0,
					icon: 'action'
				}
			},
			maxActions: 999,
			menuList: [
				// { name: '匹配列表', path: '/pagesProduct/matchList/index', type: 'link', noAuth: true },
				{ name: '我的收益', path: '/pagesUser/activity/profit', type: 'link', noAuth: true },
				{
					name: '维护地区查询',
					path: '/pagesWater/areaList/index',
					type: 'link',
					noAuth: true
				},
				{
					name: '在线客服',
					path: '',
					type: 'kefu',
					noAuth: true
				},
				{
					name: '关于我们',
					path: '/pagesUser/aboutUs/index',
					type: 'link',
					noAuth: false
				},
				{
					name: '意见反馈',
					path: '/pagesUser/adviceUs/index',
					type: 'link',
					noAuth: true
				},
				{
					name: '使用情况',
					path: '/pagesWater/extension/usage',
					type: 'link',
					noAuth: true
				}
			],
			bannerList: []
		}
	},
	computed: mapGetters(["isLogin"]),
	onLoad(options) {
		this.getBannerList()
	},
	async onShow() {
		uni.$on('loginOut', (data) => {
			this.userInfo = {};
			this.isShowAuth = true
		})
		uni.$on('loginSuccess', (data) => {
			this.onLoadFun()
		})
		if (this.isLogin) {
			this.onLoadFun()
		} else {
			// #ifdef H5
			if (Routine.isWeixin()) {
				
			} else {
				this.isShowAuth = true
			}
			// #endif
			// #ifdef MP-WEIXIN
			this.isShowAuth = true;
			// #endif

		}

	},

	methods: {
		getBannerList() {
			getBannerConfig(6).then(res => {
				this.bannerList = res.data
			})
		},
		// 获取用户关注 动态等数量
		async getUserNum() {
			const res = await getUsrNumApi({
				followEnterpriseCount: true,
				unreadChangeMessageCount: true
			})
			const { followEnterpriseCount = 0, unreadChangeMessageCount = 0 } = res.data
			this.$set(this.numList, 'follow', {
				...this.numList.follow,
				value: followEnterpriseCount
			})
			this.$set(this.numList, 'action', {
				...this.numList.action,
				value: unreadChangeMessageCount
			})
		},

		onTabItemTap() {
			let params = {
				Um_Key_ButtonName: 'tabbar-我的',
				Um_Key_SourcePage: '我的',
			}
			this.$umaTrack.pageClickTrack(params)
		},
		editUser() {
			if (!this.isLogin) return this.isShowAuth = true;
			uni.navigateTo({
				url: '/pagesUser/editUser/index'
			})
		},
		handleGo(key) {
			if (!this.isLogin) return this.isShowAuth = true;
			let url = ''
			switch (key) {
				case 'balance':
					url = ''
					break
				case 'follow':
					url = '/pagesUser/msg/index?type=follow'
					break
				case 'action':
					url = '/pagesUser/msg/index?type=action'
					break
			}
			if (url) {
				uni.navigateTo({
					url
				})
			}
		},
		handleClickMenu(v) {
			if (!this.isLogin && v.noAuth) return this.isShowAuth = true
			if (v.type == 'link') {
				uni.navigateTo({
					url: v.path
				})
			} else if (v.type == 'kefu') {
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc389dffe7ae981936'
					},
					corpId: 'ww1c4069be6ea4025e',
					showMessageCard: true,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
				})
				// #endif
			}
		},
		handleActivity() {
			if (this.activityIsBlack) {
				this.$util.Tips('活动已结束')
			} else {
				console.log('----------')
				uni.navigateTo({
					url: '/pagesUser/activity/activity'
				})
			}
		},
		onLoadFun() {
			this.isShowAuth = false;
			this.doActivity()
			this.getUserInfo();
			// this.$refs.searchNum.getInfo()
			// this.getUserNum()
			this.getPersonalDistributionInfo()
		},
		async getPersonalDistributionInfo() {
			let res = await getPersonalDistributionInfoApi();
		},
		authColse() {
			this.isShowAuth = false;
		},
		getUserInfo() {
			let that = this
			store.dispatch("USERINFO").then(res => {
				that.userInfo = res
			})
		},

	}
}
</script>
<style lang="scss">
page {
	background-color: #f5f5f5 !important;
}

.info-main {
	display: flex;
	justify-content: space-between;
	margin: 30rpx;

	.info-right {
		margin-top: 14rpx;
	}

	.info-left {
		display: flex;
		width: 100%;

		.info-left-img {
			border: 1rpx solid #E6E6E6;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.info-left-info {
			height: 120rpx;
			margin-left: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			width: 0;

			.info-left-name {
				font-weight: 600;
				font-size: 34rpx;
				color: #333333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 48rpx;
			}

			.info-left-desc {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
				line-height: 37rpx;
				margin-top: 8rpx;

			}

		}
	}

}

.nums {
	margin: 40rpx 30rpx 0;
	background-color: #fff;
	border-radius: 24rpx;
	display: flex;
	align-items: stretch;
	padding: 23rpx 0 24rpx;

	.num-item {
		flex: 1;
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #333;
		padding-top: 12rpx;
		padding-bottom: 11rpx;

		&:not(:last-of-type) {
			border-right: 1rpx solid #EAEAEA;
		}

	}

	.num-icon {
		width: 40rpx;
		margin-right: 20rpx;
	}

	.num-val {
		font-size: 26rpx;
		line-height: 37rpx;
		margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.flg {
			position: relative;

			&::after {
				position: absolute;
				content: '';
				width: 14rpx;
				height: 14rpx;
				background-color: #FF0000;
				top: 2rpx;
				right: -10rpx;
				border-radius: 100%;
			}
		}
	}

	.num-link {
		background-color: #EAEAEA;
		width: 24rpx;
		height: 24rpx;
		line-height: 20rpx;
		text-align: center;
		border-radius: 100%;
	}
}

.menu-box {
	background-color: #fff;
	border-radius: 30rpx;
	margin: 20rpx 30rpx 30rpx;

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		border-bottom: 1rpx solid #EDEDED;
		// margin:0 30rpx;
		padding: 0 30rpx;

		.menu-item-name {
			font-weight: 400;
			font-size: 34rpx;
			color: #333333;
		}

		&:last-child {
			border-bottom: none;
		}
	}

}

.banner-box {
	padding: 0 30rpx;

	.banner-item {
		width: 100%;
		height: 200rpx;

		>image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>